<template>
	<view class="content">
		<!-- 搜索栏（保持不变） -->
		<view class="search-container">
			<view class="search-bar">
				<image class="search-icon" src="/static/search (4).png"></image>
				<input class="search-input" placeholder="算法 · Vue · Java" placeholder-class="placeholder-style" />
			</view>
			<view class="search-actions">
				<image class="coin-icon" src="/static/红包.png"></image>
				<image class="mail-icon" src="/static/wl-信封.png"></image>
			</view>
		</view>

		<!-- Tabs 标签（保持不变） -->
		<scroll-view class="tabs-container" scroll-x="true" show-scrollbar="false">
			<view class="tab-item" v-for="(tab, index) in tabs" :key="index" @click="onTabChange(index)"
				:class="{ 'tab-active': activeTab === index }">
				{{ tab }}
				<view v-if="activeTab === index" class="tab-indicator"></view>
			</view>
		</scroll-view>

		<!-- 轮播图（保持不变） -->
		<view class="swiper-container">
			<swiper class="banner-swiper" :indicator-dots="false" autoplay interval="3000" duration="500"
				indicator-active-color="#ff5722" circular>
				<swiper-item v-for="(img, index) in swiperImages" :key="index">
					<image class="swiper-img" :src="img" mode="aspectFill"></image>
				</swiper-item>
			</swiper>

			<!-- 模块区域（保持不变） -->
			<view class="module-container">
				<view class="module-row">
					<view class="module-item system-course">
						<view class="module-content">
							<text class="module-title">体系课</text>
							<text class="module-desc">全方位培养岗位胜任力</text>
							<view class="tag-container">
								<text class="module-tag">系统培养</text>
							</view>
							<text class="module-tag1">快速就业</text>
						</view>
						<image class="module-icon" src="/static/10.png"></image>
					</view>
					<view class="module-item practice-course">
						<view class="module-content">
							<text class="module-title">实战课</text>
							<text class="module-desc">快速上手提升开发技能</text>
							<view class="tag-container">
								<text class="module-tag">真实项目</text>
							</view>
							<text class="module-tag1">以战代学</text>
						</view>
						<image class="module-icon" src="/static/111.png"></image>
					</view>
				</view>
			</view>

			<!-- 课程列表（添加@click跳转事件） -->
			<view class="course-section">
				<view class="section-header">
					<text class="section-title">新上好课</text>
					<view class="more-btn" @click="handleMore">
						<text class="more-text">更多</text>
						<image class="more-icon" src="/static/arrow-right.png"></image>
					</view>
				</view>
				<view class="course-list">
					<!-- 关键修改：添加@click="gotoCourseDetail(item)" -->
					<view class="course-item" v-for="(item, index) in courseList" :key="index"
						@click="gotoCourseDetail(item)">
						<image class="course-img" :src="item.img" mode="aspectFill"></image>
						<view class="course-info">
							<text class="course-title">{{ item.title }}</text>
							<view class="teacher-level">
								<text class="teacher">{{ item.teacher }}</text>
								<text class="level">{{ item.level }}</text>
							</view>
							<view class="price-learn">
								<text class="price">¥{{ item.price }}</text>
								<text class="learn-count">{{ item.learnCount }}人学习</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['推荐', '免费课', '实战课', '体系课', '专栏', '教程'],
				activeTab: 0,
				activeColor: '#ff5722',
				inactiveColor: '#666',
				swiperImages: [],
				defaultSwiperImages: ['/static/1.jpg', '/static/6.png', '/static/7.png', '/static/8.png', '/static/9.png'],
				courseList: [{
						img: '/static/1.png',
						title: 'AI助手Copilot辅助Go+Flutter打造全栈式在线教育系统',
						teacher: 'haharsw',
						level: '初阶',
						price: 499,
						learnCount: 53,
						// 补充课程详情页所需字段（匹配效果图）
						rank: '新上好课榜第5名', // 课程排名
						duration: '45小时', // 视频时长
						score: '9.8分', // 课程评分
						returnPolicy: '7天未学可退', // 退款政策
						description: '结合AI助手Copilot高效开发，从0到1掌握Go后端+Flutter前端全栈技术，落地在线教育系统项目，适合零基础到初阶开发者提升全栈能力。' // 课程简介
					},
					{
						img: '/static/2.png',
						title: '全新 云原生系统精讲与全流程落地实践',
						teacher: '暮闲',
						level: '初阶',
						price: 199,
						learnCount: 52,
						rank: '云原生榜第3名',
						duration: '30小时',
						score: '9.6分',
						returnPolicy: '7天未学可退',
						description: '从云原生核心概念（Docker、K8s）到企业级项目全流程落地，涵盖环境搭建、服务部署、监控运维，帮助开发者快速掌握云原生技术栈。'
					},
					{
						img: '/static/3.png',
						title: 'NestJS 从拔高到精通，大型复杂业务架构落地实践',
						teacher: 'Brian',
						level: '进阶',
						price: 699,
						learnCount: 97,
						rank: 'TOP 新课榜第8名',
						duration: '50小时',
						score: '10.00分',
						returnPolicy: '7天未学可退',
						description: '从拔高到精通，一课吃透NestJS 快速提升服务端开发核心竞争力 全面覆盖NestJS核心技能 全面涵盖动态模块、队列任务、缓存管理及权限校验等技术，从拔高到精通，快速掌握NestJS核心技能。构建高效稳定的服务端框架 掌握大型复杂项目开发模式，构建高效、可扩展的服务端应用，晋升高效快速响应'
					}
				]
			};
		},
		onLoad() {
			this.getBannerList();
		},
		methods: {
			getBannerList() {
				uni.request({
					url: 'http://47.113.230.113:8088/banner/list',
					method: 'GET',
					header: {
						'Accept': 'application/json'
					},
					success: (res) => {
						const {
							status,
							data: bannerData
						} = res.data;
						if (status === 200 && bannerData && bannerData.length > 0) {
							this.swiperImages = bannerData.map(item => item.bannerSrc);
						} else {
							this.swiperImages = this.defaultSwiperImages;
							uni.showToast({
								title: '轮播图数据异常，使用默认图',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('轮播图请求失败：', err);
						this.swiperImages = this.defaultSwiperImages;
						uni.showToast({
							title: '网络错误，轮播图加载失败',
							icon: 'none'
						});
					}
				});
			},
			onTabChange(index) {
				this.activeTab = index;
			},
			handleMore() {
				console.log('点击更多');
			},
			// 新增：跳转至课程详情页（携带课程数据）
			gotoCourseDetail(course) {
				// 将课程对象转为JSON字符串（避免复杂数据传递丢失）
				const courseStr = JSON.stringify(course);
				uni.navigateTo({
					url: `/pages/Lesson?course=${courseStr}` // 跳转路径需匹配项目实际页面结构
				});
			}
		}
	};
</script>

<style scoped>
	/* 样式完全保持不变，此处省略（与原代码一致） */
	.content {
		padding: 20rpx 24rpx;
		background-color: #f8f9fa;
		min-height: 100vh;
	}

	.search-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 36rpx;
		padding: 16rpx 24rpx;
		flex: 1;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.placeholder-style {
		color: #999;
		font-size: 28rpx;
	}

	.search-actions {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		gap: 20rpx;
	}

	.coin-icon,
	.mail-icon {
		width: 44rpx;
		height: 44rpx;
	}

	.tabs-container {
		display: flex;
		white-space: nowrap;
		margin-bottom: 30rpx;
		height: 80rpx;
	}

	.tab-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		padding: 0 28rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #666;
		position: relative;
		height: 100%;
		justify-content: center;
	}

	.tab-active {
		color: #ff5722;
		font-weight: 600;
	}

	.tab-indicator {
		width: 40rpx;
		height: 6rpx;
		background: linear-gradient(90deg, #ff7f42, #ff5722);
		border-radius: 3rpx;
		position: absolute;
		bottom: 0;
	}

	.swiper-container {
		margin-bottom: 30rpx;
	}

	.banner-swiper {
		height: 320rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(255, 87, 34, 0.15);
	}

	.swiper-img {
		width: 100%;
		height: 100%;
	}

	.module-container {
		margin: 40rpx 0;
	}

	.module-row {
		display: flex;
		gap: 24rpx;
	}

	.module-item {
		flex: 1;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 180rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.system-course {
		background: linear-gradient(135deg, #fff5f7, #ffeef0);
	}

	.practice-course {
		background: linear-gradient(135deg, #fff9e6, #fff2cc);
	}

	.module-content {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.module-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.module-desc {
		font-size: 24rpx;
		font-weight: 600;
		white-space: nowrap;
		color: #ff5722;
	}

	.tag-container {
		display: flex;
		gap: 16rpx;
	}

	.module-tag {
		font-size: 20rpx;
		color: #666;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}

	.module-tag1 {
		font-size: 20rpx;
		color: #666;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		width: 80rpx;
	}

	.module-icon {
		width: 55rpx;
		height: 55rpx;
		position: relative;
		object-fit: cover;
		top: 64rpx;
		left: 0rpx;
	}

	.course-section {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
		position: relative;
		padding-left: 20rpx;
	}

	.section-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #ff7f42, #ff5722);
		border-radius: 4rpx;
	}

	.more-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.more-text {
		font-size: 26rpx;
		color: #999;
	}

	.more-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.course-list {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.course-item {
		display: flex;
		gap: 24rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		cursor: pointer;
	}

	/* 新增cursor: pointer提示可点击 */
	.course-item:last-child {
		border-bottom: none;
	}

	.course-img {
		width: 160rpx;
		height: 200rpx;
		border-radius: 16rpx;
		flex-shrink: 0;
	}

	.course-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.course-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.teacher-level {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.teacher,
	.level {
		font-size: 24rpx;
		color: #999;
	}

	.level {
		background: #f5f5f5;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}

	.price-learn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price {
		font-size: 28rpx;
		font-weight: 600;
		color: #ff5722;
	}

	.learn-count {
		font-size: 24rpx;
		color: #999;
	}
</style>